<!--buy  container-->
<template>
  <div class="hostel-container">
    <div class="search-box">
      <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"  class="demo-ruleForm main-search-box">
        <el-form-item prop="" :label="$t('m.Region')">
          <el-select style="width:200px;" v-model="searchForm.regionId" clearable placeholder="" @change="getTownships">
            <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="" :label="$t('m.Township')">
          <el-select style="width:200px;" multiple collapse-tags v-model="searchForm.townshipId" placeholder="">
            <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="" :label="$t('m.Hosteltype')">
          <el-select style="width:200px;" v-model="searchForm.hostelType" clearable placeholder="" @change="getSubType">
            <el-option v-for="rg in hostelTypes" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item prop="region" label="Property type">
          <el-select style="width:200px;" v-model="searchForm.propertyTypeId" clearable placeholder="" @change="getSubType">
            <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" label="Sub type">
          <el-select style="width:200px;" multiple collapse-tags v-model="searchForm.propertySubTypeId" placeholder="">
            <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>-->
        <el-row>
          <el-col>
            <el-form-item prop="region" :label="$t('m.PriceMinKs')" style="width: 200px;margin-right: 0">
              <el-input v-model="searchForm.priceMin" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 25px;margin-right: 0px;"><span>-</span></el-form-item>
            <el-form-item prop="region" :label="$t('m.PriceMaxKs')" style="width: 200px">
              <el-input v-model="searchForm.priceMax" placeholder=""></el-input>
            </el-form-item>

            <el-form-item style="margin-top: 24px;margin-left: 1px;">
              <el-button style="color: #606266!important;" @click="toggleShowMore">{{$t('m.More')}} <i v-if="!showMore" class="el-icon-arrow-down"></i><i
                v-if="showMore"
                class="el-icon-arrow-up"></i>
              </el-button>
              <el-button type="primary" @click="getList(1)">{{$t('m.Search')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="line-form" v-if="showMore"></div>
      <!--more-->
      <el-form v-if="showMore" :inline="true" label-position="top"  ref="form" :model="moreForm"  size="mini"
               class="more-box main-search-box">
            <el-form-item :label="$t('m.Room')">
              <el-select style="width:200px;" collapse-tags v-model="moreForm.room" @change="onRoomChange"
                         placeholder="">
                <el-option v-for="ts in roomJson" :key="ts.value" :label="ts.text"
                           :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.PersonNumber')"  v-if="isBedroom">
              <el-select style="width:200px;" multiple collapse-tags v-model="moreForm.bedroomPerson"
                         placeholder="">
                <el-option v-for="ts in roomPersonJson" :key="ts.value" :label="ts.text"
                           :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
        <el-row class="serch-wrap">
          <el-col :span="20">
            <el-form-item :label="$t('m.FloorLevel')">
              <el-checkbox-group v-model="moreForm.floorLevel" size="mini">
                <el-checkbox v-for="fl in floorLevelJson" :label="fl.value" :key="fl.value" border>{{fl.text}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="serch-wrap">
          <el-col :span="20">
            <el-form-item :label="$t('m.Others')">
              <!--<el-checkbox-group v-model="moreForm.others" size="mini">-->
                <!--<el-checkbox v-for="other in othersJson" :label="other.value" :key="other.value" border>{{other.text}}</el-checkbox>-->
              <!--</el-checkbox-group>-->
                  <el-checkbox v-model="noDeposit" :label="$t('m.Nodeposit')" border></el-checkbox>
                  <el-checkbox v-model="canCookRice" :label="$t('m.Cancookrice')" border></el-checkbox>
                  <el-checkbox v-model="canCookFood" :label="$t('m.Cancookfood')" border></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="sort-box">
      <el-form  size="mini" ref="sortForm" class="demo-ruleForm">
        <el-row class="serch-wrap">
          <el-col :span="6">
            <el-form-item prop="region" label="" style="margin-bottom: 0">
              <el-select v-model="sortForm" :placeholder="$t('m.Sort')" @change="getList">
                <el-option v-for="rg in buySortJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buyList" v-if="tableData.length > 0">
      <div class="hostel-list" v-for="item in tableData" @click="goToDetail(item.landlordPropertyId)">
        <div class="hostel-list-box">
          <div class="hostel-img-box">
            <img :src="item.photoUrl" class="hostel-img" alt="" :onerror="defaultImg"/>
          </div>
          <div class="hostel-info-box">
            <p style="color:#2c3e50;">{{ item.street?translateUTZaw(item.street)+',' :''
              }}{{getTownshipId(item.townshipId)}},{{getregionId(item.regionId)}}</p>
            <p>{{getHostelType(item.hostelTypeId)}}</p>
            <p>{{item.floorLevel}}</p>
            <p>{{getDepositType(item.depositType, item.depositFee)}}</p>
          </div>
        </div>
        <div class="room-type-box" v-for="list in item.landlordPropertyRoomList">
          <span class="room-type" style="color:#2c3e50;">{{getRoomType(list.roomType, list.roomTypeDesc)}}</span>
          <span class="room-type" style="color:rgb(74, 214, 98);">{{getRoomDate(list.roomDatetime)}}</span>
          <span class="price-currency" v-if="list.fee">{{regexNum(list.fee)}}&nbsp;Ks</span>
        </div>
      </div>
      <div class="page-list-box">
        <el-pagination
          background
          @current-change="handleChangePage"
          :current-page="pageData.pageNum"
          :page-count="pageInfo.totalPages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
    <div class="buyList" v-else>
      <div class="no-data">No Data</div>
      <div class="page-list-box">
        <el-pagination
          background
          @current-change="handleChangePage"
          :current-page="pageData.pageNum"
          :page-count="pageInfo.totalPages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
    <!--隐藏tabel列表，用上面的div.class(buyList)重构DOM-->
    <!--<div class="buyList">
      <el-table
        :data="tableData"
        :show-header="false"
        @row-click="goToDetail"
        style="width: 100%">
        <el-table-column
          label=""
          width="200">
          <template slot-scope="scope">
            <img :src="scope.row.photoUrl" class="rent-img" alt="" :onerror="defaultImg"/>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="350">
          <template slot-scope="scope">
            <p>{{ scope.row.street?scope.row.street+',' :''
              }}{{getTownshipId(scope.row.townshipId)}},{{getregionId(scope.row.regionId)}}</p>
            <p>{{getHostelType(scope.row.hostelTypeId)}}</p>
            <p>{{scope.row.floorLevel}}</p>
            <p>{{getDepositType(scope.row.depositType, scope.row.depositFee)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="">
          <template slot-scope="scope">
              <div v-for="item in scope.row.landlordPropertyRoomList">
                <span class="room-type">{{getRoomType(item.roomType, item.roomTypeDesc)}}</span>
                <span class="room-type">{{getRoomDate(item.roomDatetime)}}</span>
                <span class="price-currency" v-if="item.fee">{{regexNum(item.fee)}}&nbsp;Ks</span>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-list-box">
        <el-pagination
          background
          @current-change="handleChangePage"
          :current-page="pageData.pageNum"
          :page-count="pageInfo.totalPages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>-->
  </div>
</template>
<script>
  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/buySort'
  import hostelTypes from '@/json/hostelTypes'
  import depositType from '@/json/depositType'
  import bedroom from '@/json/bedroom'
  import hall from '@/json/hall'
  import roomTypes from '@/json/roomType'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/buySort'
  import mm_hostelTypes from '@/mmJson/hostelTypes'
  import mm_depositType from '@/mmJson/depositType'
  import mm_bedroom from '@/mmJson/bedroom'
  import mm_hall from '@/mmJson/hall'
  import mm_roomTypes from '@/mmJson/roomType'

  import {searchHostelList} from '../../api/mgc_api'
  import qs from 'qs'

  export default {
    name: 'hostel',
    data() {
      return {
        defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        townships: [],
        propertySubType: [],
        showMore: false,
        searchForm: {
          regionId: 2,
          townshipId: [],
          hostelType:null,
          // propertyTypeId: null,
          // propertySubTypeId: [],
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          room: null,
          bedroomPerson: [],
          floorLevel: [],
          others: [],
        },
        noDeposit: false,
        canCookRice: false,
        canCookFood: false,
        // othersJson: [
        //   {"text": "No deposit", "value": 0},
        //   {"text": "Can cook rice", "value": 1},
        //   {"text": "Can cook food", "value": 2},
        // ],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableData: [],
        sortForm: '',
        isBedroom:false,
      }
    },
    computed: {
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
      hostelTypes(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hostelTypes
        }else {
          return hostelTypes
        }
      },
      depositTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_depositType
        }else {
          return depositType
        }
      },
      bedRoomJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_bedroom
        }else {
          return bedroom
        }
      },
      hallJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hall
        }else {
          return hall
        }
      },
      buySortJson(){
        if(this.$store.state.localLang == 'MM'){
          return [
            {
              "text": "ေစ်းႏွဳန္း (အနည္းဆံုးမွ အမ်ားဆံုးသို႔)",
              "value": "price asc"
            },

            {
              "text": "ေစ်းႏွဳန္း (အမ်ားဆံုးမွ အနည္းဆံုးသို႔)",
              "value": "price desc"
            },
          ]
        }else {
          return [
            {
              "text": "Price (low to high)",
              "value": "price asc"
            },
            {
              "text": "Price (high to low)",
              "value": "price desc"
            },
          ]
        }
      },
      roomTypesJson (){
        if(this.$store.state.localLang == 'MM'){
          return mm_roomTypes
        }else {
          return roomTypes
        }
      },
      roomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အိပ္ခန္း", "value": 3},
            {"text": "Hall", "value": 4},
            {"text": "ထပ္ခိုး", "value": 1},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Bedroom", "value": 3},
            {"text": "Hall", "value": 4},
            {"text": "Mezzanine", "value": 1},
          ]
        }
      },
      floorLevelJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "​ေျမညီထပ္​ -2", "value": 2},
            {"text": "3-5", "value": 3},
            {"text": "6-10", "value": 6},
            {"text": "11+", "value": 11},
          ]
        } else {
          return [
            {"text": "Ground-2", "value": 2},
            {"text": "3-5", "value": 3},
            {"text": "6-10", "value": 6},
            {"text": "11+", "value": 11},
          ]
        }
      },
      roomPersonJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "၁ ေယာက္ခန္း", "value": 1},
            {"text": "၂ ေယာက္ခန္း", "value": 2},
            {"text": "၃ ေယာက္ခန္း", "value": 3},
            {"text": "၄ ေယာက္ခန္း", "value": 4},
            {"text": "၅ ေယာက္ႏွင့္အထက္", "value": 5},
          ]
        } else {
          return [
            {"text": "1 person", "value": 1},
            {"text": "2 person", "value": 2},
            {"text": "3 person", "value": 3},
            {"text": "4 person", "value": 4},
            {"text": "5+ person", "value": 5},
          ]
        }
      },
    },
    methods: {
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      getTownships (regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []
        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType (type) {
        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []
        if(this.$store.state.localLang == 'MM'){
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      toggleShowMore() {
        this.showMore = !this.showMore
      },
      getTownshipId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of townships) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getregionId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_regions) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of regions) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getHostelType (f){
        let arr = []
        f =f.split(",")
        this.hostelTypes.forEach((item) => {
          f.forEach((i) => {
            if (item.value == i) {
              arr.push(item.text)
            }
          })
        })
        return arr.toString()
      },
      getDepositType (t, fee){
        let str = ''
        if (t == 2){
          if(fee){
            str = this.regexNum(fee) + ' Ks'
          } else {
            this.depositTypeJson.forEach((item) => {
              if (item.value == t) {
                str = item.text || ''
              }
            })
          }
        } else {
          this.depositTypeJson.forEach((item) => {
            if (item.value == t) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      // roomtype -->  hall/bedroom..
      getRoomType (roomType, roomTypeDesc) {
        let str = ''
        if (roomType == 3) {
          //  Bedroom
          this.bedRoomJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else if(roomType == 4) {
          //  Hall
          this.hallJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else {
          this.roomTypesJson.forEach((item) => {
            if (item.value == roomType) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      getRoomDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        var ts = d + '-' + m + '-' + Y
        return ts
      },
      onRoomChange (val) {
        // for (var i = 0; i < this.moreForm.room.length; i++) {
        //   if (this.moreForm.room[i] == 'Any') {
        //     if (this.moreForm.room[0] == 'Any' && val.length > 1) {
        //       this.moreForm.room.shift()
        //     } else {
        //       this.moreForm.room = ['Any']
        //     }
        //   }
        // }
        if (val == 3) {
          this.isBedroom = true
        } else {
          this.isBedroom = false
          this.moreForm.bedroomPerson = []
          if (val == 'Any') {
            this.moreForm.room = null
          }
        }
      },
      getList(pageNum) {

        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }

        let searchForm = {};

        // 搜索子段处理
        if(this.searchForm.regionId){
          searchForm.regionId = this.searchForm.regionId
        }
        // if(this.searchForm.propertyTypeId){
        //   searchForm.propertyTypeList = this.searchForm.propertyTypeId
        // }
        if(this.searchForm.hostelType){
          searchForm.hostelType = this.searchForm.hostelType
        }
        if (this.searchForm.townshipId.length > 0) {
          searchForm.townshipIdList = this.searchForm.townshipId.join(',')
          // searchForm.propertySubTypeList = this.searchForm.propertySubTypeId.join(',')
        }

        // minPrice
        if(this.searchForm.priceMin){
          searchForm.minPrice = this.searchForm.priceMin
        }
        // maxPrice
        if(this.searchForm.priceMax){
          searchForm.maxPrice = this.searchForm.priceMax
        }

        // sort
        if(this.sortForm){
          searchForm.sort = this.sortForm
        }
        // floor level
        searchForm.roomType = this.moreForm.room
        //bedroom person
        if (this.moreForm.bedroomPerson.length > 0) {
          let j = 0
          for(let i=0;i<this.moreForm.bedroomPerson.length;i++){
            if (this.moreForm.bedroomPerson[i] == 5) {
              searchForm['roomNumberParamModel.minRoomNumber'] = '5'
            } else {
              searchForm['roomNumberParamModel.roomNumberList[' + j + ']'] = this.moreForm.bedroomPerson[i]
              j++
            }
          }
        }
        // floor level
        if (this.moreForm.floorLevel.length > 0) {
          for(let i=0;i<this.moreForm.floorLevel.length;i++){
            if (this.moreForm.floorLevel[i] == 2) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '0'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '2'
            } else if (this.moreForm.floorLevel[i] == 3) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '3'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '5'
            } else if (this.moreForm.floorLevel[i] == 6) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '6'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = '10'
            } else if (this.moreForm.floorLevel[i] == 11) {
              searchForm[`floorLevelList[` + i + `].minLevel`] = '11'
              searchForm[`floorLevelList[` + i + `].maxLevel`] = ''
            }
          }
        }
        // noDeposit
        if(this.noDeposit){
          searchForm.noDeposit = this.noDeposit
        }

        // canCookRice
        if(this.canCookRice){
          searchForm.canCookRice = this.canCookRice
        }

        // canCookFood
        if(this.canCookFood){
          searchForm.canCookFood = this.canCookFood
        }
        // return false
        searchHostelList(Object.assign(searchForm, this.pageData)).then((res) => {
          this.tableData = res.data.data.object.list || []
          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          window.scrollTo(0,0)
        }).catch((e) => {
          console.log(e)
        })
      },
      goToDetail(id) {
        const {href} = this.$router.resolve({
          name: 'foo',
          path: '/hostelDetails',
          query: {
            id: id
          }
        })
        window.open(href, '_blank');
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted() {
      this.searchForm.regionId = Number(this.$route.query.regionId) || 2;
      if (this.$route.query.townshipId && this.$route.query.townshipId.length > 0) {
        if (this.$route.query.townshipId.length > 0) {
          this.getTownships(this.searchForm.regionId)
          if (this.$store.state.localLang == 'MM') {
            for (var t of mm_townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          } else {
            for (var t of townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          }
        }
      }else{
        this.getTownships(this.searchForm.regionId)
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (t.value == this.searchForm.regionId) {
              this.searchForm.townshipId.push(t.value)
            }
          }
        } else {
          for (var t of townships) {
            if (t.value == this.searchForm.regionId) {
              this.searchForm.townshipId.push(t.value)
            }
          }
        }
      }

      // this.searchForm.propertyTypeId = Number(this.$route.query.propertyTypeId) || null;
      this.searchForm.hostelType = Number(this.$route.query.hostelType) || null;

      // this.searchForm.propertySubTypeId = this.$route.query.propertySubTypeId || []
      // if (this.$route.query.propertySubTypeId) {
      //   if (this.$route.query.propertySubTypeId.length > 0) {
      //     this.getSubType(this.searchForm.propertyTypeId)
      //     if (this.$store.state.localLang == 'MM') {
      //       for (var t of mm_propertySubType) {
      //         for (var s of this.$route.query.propertySubTypeId) {
      //           if (t.value == s) {
      //             this.searchForm.propertySubTypeId.push(t.value)
      //           }
      //         }
      //       }
      //     } else {
      //       for (var t of propertySubType) {
      //         for (var s of this.$route.query.propertySubTypeId) {
      //           if (t.value == s) {
      //             this.searchForm.propertySubTypeId.push(t.value)
      //           }
      //         }
      //       }
      //     }
      //   }
      // }

      this.searchForm.priceMin = this.$route.query.minPrice || ''
      this.searchForm.priceMax = this.$route.query.MaxPrice || ''
      this.getList()

    }
  }
</script>
<style>

  .search-box .el-button--primary{
    background-color: #f60!important;
    border-color: #f60!important;
  }

  .search-box .el-form-item {
    margin-bottom: 10px !important;
  }

  .search-box {
    position: relative;
    padding-top: 20px;
    border-bottom: 1px solid #eee;
  }

  .serch-wrap {
    /*height: 100px;*/
    width: 100%;
    margin: 0;
  }

  .more-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .buyList {
    width: 1218px;
    margin: 0 auto;
  }

  .buyList .el-table__row {
    cursor: pointer;
  }

  .buyList .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .buyList .el-table__row p {
    /*margin: 22px 0;*/
  }

  .list-info-title {
    margin: 0;
  }

  .rent-price {
    color: rgb(255, 0, 0);
    height: 130px;
    position: relative;
    top: 8px;
    left: 0;
  }

  .page-list-box {
    text-align: center;
    margin: 30px 0;
  }

  .sort-box {
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
  }

  .main-search-box {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
  }
  .room-type{
    display: inline-block;
    line-height: 1.5;
    min-width:15%;
    max-width: 25%;
  }
  .hostel-container .price-currency {
    color: red;
  }
  .hostel-img-box{
    padding:0 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .hostel-img-box .hostel-img{
    width:180px;
    height:135px;
    vertical-align: middle;
  }
  .hostel-info-box{
    padding:0 10px;
    display: inline-block;
  }
  .hostel-info-box p:first-child{
    margin-top:0;
  }
  .hostel-list{
    padding:20px 0;
    border-bottom: 1px solid #ebeef5;
    color:#606266;
    cursor: pointer;
  }
  .hostel-list:hover{
    background: #f5f7fa;
  }
  .hostel-list-box{
    display: flex;
  }
  .room-type-box{
    padding:0 10px;
    margin-top:10px;
  }
  .line-form {
    border-top: 1px solid #eee;
  }
  .no-data{
    height:60px;
    line-height: 60px;
    border-bottom: 1px solid #ebeef5;
    color:#909399;
    text-align: center;
  }
</style>
